<template>
  <div class="app-container">
      周月报查询
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
        <el-select v-model="param.reportType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
        placeholder="请输入标题"
        prefix-icon="el-icon-search" clearable v-model="param.reportTitle">
        </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="selectReport"></el-button>
      </el-col>
    </el-row>
    <el-row>
    <el-table :data="reportList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="学生账号" width="80">
        <template slot-scope="scope">
          {{ scope.row.studentAccount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="80">
        <template slot-scope="scope">
          {{ scope.row.studentName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="报告标题" width="80">
        <template slot-scope="scope">
          {{ scope.row.reportTitle }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="报告类型" width="220">
        <template slot-scope="scope">
          {{ scope.row.reportType }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="报告提交方式" width="220">
        <template slot-scope="scope">
          {{ scope.row.contentTypeName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="报告提交时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="报告状态">
        <template slot-scope="scope">
          {{ scope.row.reportStatus }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="分数">
        <template slot-scope="scope">
          {{ scope.row.resultValue }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="toDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    </el-row>
    <!--分页组件-->
<el-pagination background layout="prev, pager, next"  prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currpage"
        :page-size="pageSize"
        :total="total"></el-pagination>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      角色列表<br/><br/>
      <el-checkbox-group v-model="checkedList">
        <el-checkbox v-for="(role, index) in roleList" :key="index" :label="role.rlName"></el-checkbox>
      </el-checkbox-group>
      <br/>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmUser">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getUserList, assignUserRoles } from '@/api/user'
import { deepClone } from '@/utils'
import { getRoles } from '@/api/role'
import checkPermission from '@/utils/permission' // 权限判断函数
import { searchUser } from '@/api/remote-search'
import { getReportList } from '@/api/report'

const defaultUser = {
  urId: 0,
  urUserName: '',
  urSalt: '',
  introduction: '',
  avatar: '',
  name: ''
}

export default {
  data() {
    return {
      user: Object.assign({}, defaultUser),
      reportList: [],
      dialogVisible: false,
      dialogTitle: '',
      roleList: [],
      checkedList: [],
      param :{
      start: 0,
      limit: 10,
      reportType:'',
      reportTitle:'',
      reportStatus:1
      },
      pageSize: 10, //每一页的数据大小
      currpage: 1, //当前页
      total:0,//总条数
       options: [{
          value: '0',
          label: '周报'
        }, {
          value: '1',
          label: '月报'
        }, {
          value: '2',
          label: '中期报告'
        }, {
          value: '3',
          label: '实训论文'
        }],
        value: ''
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
    this.getReportList()
  },
  methods: {
    checkPermission, 
    async getReportList() {
      let res = await getReportList(this.param)
      this.reportList = res.beans
      this.total = res.bean.total
    },
    toDetail(row) {
     this.$router.push({
        path: "/reportDetail",
        query:{
          reportId:row.reportId
        }
        })
    },
    async confirmUser() {
      this.user.roleList.splice(0, this.user.roleList.length)
      this.checkedList.forEach( rlName => {
        this.roleList.forEach( role => {
          if(rlName === role.rlName) {
            this.user.roleList.push(role)
            return
          }
        })
      })

      await assignUserRoles(this.user)
      this.getUserList()
      this.dialogVisible = false
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getReportList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getReportList();
    },
    selectReport(){
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.getReportList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
